<template>
	<div class="table-div">
		<!-- 表格头部面板 -->
		<div class="table-panel">
			<!-- 
                @keyup.native ---- 键盘松开事件
				@keyup.enter.native ---- 回车事件
             -->
			<el-input
				v-model="search.userName"
				placeholder="关键字查询"
				class="filter-item"
				@keyup.enter.native="initTableData"
				@keyup.native="initTableData"
			/>
			<el-button plain type="primary" icon="el-icon-plus" @click="addModel()">新增</el-button>
		</div>

		<!-- 
            表格
            @row-click ---- 行点击事件
			@select-all ---- 全选事件
			@select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
			
			@sort-change="changeSort"
        -->
		<el-table
			ref="list"
			:data="tableData.list"
			style="width: 100%; margin-top: 10px"
			border
			stripe
			highlight-current-row
			
		>
			<!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件
            -->
			
			<el-table-column property="userNo" label="用户编号" width="120" align="center"></el-table-column>
			<el-table-column property="userName" label="用户名" align="center"></el-table-column>
			<el-table-column property="role.roleName" label="角色" align="center"></el-table-column>
			<el-table-column property="createTime" label="创建时间" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 5px">{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column property="updateTime" label="修改时间" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 5px">{{ scope.row.updateTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button
						plain
						icon="el-icon-edit"
						type="primary"
						title="编辑"
						size="small"
						@click="editModel(scope.row)"
					>编辑</el-button>
					<el-button
						plain
						icon="el-icon-delete"
						type="danger"
						title="删除"
						size="small"
						@click="deleteUser(scope.row)"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- model 编辑框 -->
				<UserEdit :editDialogData="editDialogData" @emitEditDialogData="receiveEditDialogData"></UserEdit>
				<UserAdd :addDialogData="addDialogData" @emitAddDialogData="receiveAddDialogData"></UserAdd>
		
				<!-- 
		            分页
		            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
		            @emitPageData ---- 子组件 $emit 函数定义的 key
		            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
		        -->
				<Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
			</div>
		</template>
		<script>
		import Pagination from "@/components/fragments/Pagination.vue";
		import UserEdit from "@/components/account/UserEdit.vue";
		import UserAdd from "@/components/account/UserAdd.vue";
		
		export default {
			name: "Users",
			components: {
				Pagination,
				UserEdit,
				UserAdd
			},
			data: function () {
				return {
					// 查询参数
					search: {
						currentPage: 1,
						pageSize: 5,
						userName: "",
						// sort: "id",
						// direction: "desc",
					},
					// 表格数据结构，参考 PageInfo
					tableData: {
						total: 20, // 总数据量
						pageNum: 1, // 当前页
						pageSize: 5, // 页长
						pages: 1, // 总页数
						list: this.$TestData.usersData, // 当前页数据集合
					},
					// 编辑窗口数据
					editDialogData: {
						userName:"",
						// 是否显示编辑窗口
						showEditDialog: false,
					},
					// 添加窗口数据
					addDialogData:{
						showAddDialog: false,
					},
				};
			},
			methods: {
				// 初始化表格数据
				initTableData: function () {
					this.$Request
						.fetch_("/user/userList", "post", this.search)
						.then((result) => {
							var newResult  = result.data;
							// console.log(newResult);
							this.tableData.list = newResult.records;
							this.tableData.total = newResult.total;
							this.tableData.pages = newResult.pages;
							this.tableData.pageNum = newResult.current;
							this.tableData.pageSize = newResult.size;
						})
						.catch((error) => {
							this.$message.error(error);
						});
				},
				// 接收分页组件 $emit 函数传递的值
				receivePageData: function (pageData) {
					this.search.currentPage = pageData.pageNum;
					this.search.pageSize = pageData.pageSize;
					this.initTableData();
				},
				// 自定义排序函数
				// changeSort: function (obj) {
				// 	this.search.sort = this.$Common.camecaseToLine(obj.prop);
				// 	this.search.direction = obj.order == "descending" ? "desc" : "asc";
				// 	this.initTableData();
				// },
				// 接收编辑组件 $emit 函数传递的值
				receiveEditDialogData: function (val) {
					this.editDialogData.showEditDialog = val;
					this.initTableData();
				},
				receiveAddDialogData:function(val){
					this.addDialogData.showAddDialog = val;
					this.initTableData();
				},
				// 新增 model
				addModel: function () {
					this.addDialogData.showAddDialog = true;
				},
				// 编辑 model
				editModel: function (row) {
					this.editDialogData = {
						userName:row.userName,
						showEditDialog:true
					}
				},
				// 删除用户
				deleteUser: function (row) {
					//console.log(row);
					this.$confirm("确定要删除当前行吗？", "删除", {
						comfirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
						.then(() => {
							var url = "/user/deleteUserByUserNo/" + row.userNo;
							this.$Request
								.fetch_(url, "delete", {})
								.then((result) => {
									if (result.status == this.$Request.OK_CODE) {
										this.$message({
											message: "删除成功",
											type: "success",
											duration: 2 * 1000,
										});
										this.search.currentPage = 1;
										this.initTableData();
									} else {
										this.$message.error(result.message);
									}
								})
								.catch((error) => {
									this.$message.error(error);
								});
						})
				},
			},
			mounted() {
				this.initTableData();
			},
		};
		</script>
		<style>
		.table-div {
			margin-top: 10px;
		}
		.filter-item {
			float: right;
			width: 200px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			/* margin-right: 5px; */
		}
		.button-item {
			float: left;
			width: 100px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			margin-right: 5px;
		}
		</style>